
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>

    <link href="img/vip.png" rel="shortcut icon" type="image/png" />


    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            width: 370px;
            height: 400px;
            margin: auto auto;
            background-color: white;
            border-radius: 5px;
        }

        .t {
            width: 100%;
            height: 100%;
        }

        #head {
            font-family: FangSong;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .one {
            width: 360px;
            height: 45px;
        }

        .one p {
            font-family: SimHei;
            font-size: 17px;
            text-align: right;
        }

        .one input {
            width: 210px;
            height: 45px;
            outline: none;
            border: none;
            border-bottom: 1px solid #000
        }

        .two {
            width: 120px;
            height: 45px;
        }


        #enroll {
            width: 330px;
            height: 45px;
            border: none;
            background-color: #ed7158;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            font-family: "Microsoft YaHei UI";
        }

        .one input:hover {
            border-color: red;
        }

        #enroll:hover {
            background-color: #d54d32;
        }
    </style>

</head>
<body>
<div>
    <form action="forget" method="post">
        <table class="t">
            <tr>
                <td colspan="2"><p id="head">修改密码</p></td>
            </tr>
            <tr class="one">
                <td class="two"><p>账&nbsp;&nbsp;&nbsp;&nbsp;号：</p></td>
                <td><input type="text" name="userName" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"
                           onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))"
                           pattern="[\u4e00-\u9fa5]{2,6}" maxlength="6"
                           placeholder="仅支持中文(2-6位)">
                </td>
            </tr>
            <tr class="one">
                <td class="two"><p>密&nbsp;&nbsp;&nbsp;&nbsp;码：</p></td>
                <td><input type="password" name="pwd" id = "pwd" placeholder="密码(6-16位)" minlength="6" maxlength="16">
                </td>
            </tr>
            <tr class="one">
                <td class="two"><p>确认密码：</p></td>
                <td><input type="password" name="confirmPwd" id = "confirmPwd" placeholder="请再次输入密码" minlength="6" maxlength="16">
                </td>
            </tr>
            <tr class="one">
                <td class="two"><p>电子邮箱：</p></td>
                <td><input type="email" name="email" placeholder="请输入电子邮箱"></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <input type="submit" value="更改" id="enroll">
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    <!-- required 必须选择一个-->
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].required = true;
    }
    const form = document.querySelector('form');
    const password1 = document.getElementById('pwd');
    const password2 = document.getElementById('confirmPwd');

    form.addEventListener('submit', function(event) {
        if (password1.value !== password2.value) {
            alert('两次密码不同!');
            event.preventDefault();
        }
    });
</script>
</body>
</html>